<!--
* @description 巡检个人排名
* @author zywu
* @date 2021/03/19 15:54:03
!-->
<template>
  <div class="inspect-manrank">
    <van-nav-bar title="日常巡检" fixed left-arrow @click-left="onClickLeft" />
    <div class="inspect-manrank__filter d-flex ai-center jc-between">
      <pop-action text="倒序" cancel-text default-value="desc" show-selected :options="sortRules" @change="onSortChange"></pop-action>
      <pop-action
        ref="popLabel"
        text="标签"
        :options="labelList"
        :default-value="defaultLabel"
        show-selected
        @change="v=>{onPickerChange('labelId',v)}"
        style="width:80px;"
      ></pop-action>
      <pop-date-picker ref="myDatepicker" text="日期" :default-date="defaultDate" @change="onDateChange"></pop-date-picker>
    </div>
    <div ref="mySwiper" class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="(item,i) in dataList" :key="item.account" class="swiper-slide">
          <sta-man-card :active="item.account==curUser" :data-obj="item" @click.native="onSelectUser(item,i)"></sta-man-card>
        </div>
      </div>
    </div>
    <div v-if="dataList.length>0" class="page-body--padding">
      <sta-complete is-personal :data-obj="countData" @jumpTab="jumpTab"></sta-complete>
      <sta-uncomplete ref="staUncomplete" :params="taskParams" :watchParams="false"></sta-uncomplete>
    </div>
    <div v-else class="no-data-img">
      <img src="../../assets/img/common/defaultnone.png" />
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import PopAction from '@/components/PopAction'
import PopDatePicker from '@/components/PopDatePicker'
import Swiper from 'swiper'
import '@/styles/swiper.css'
import StaManCard from './StaManCard.vue'
import StaComplete from './StaComplete.vue'
import StaUncomplete from './StaUncomplete.vue'
import { sortRules } from '@/config/dict'
import { getExamineTaskPeopleCount, getExamineTaskStats } from '@/api/inspect'
import { getLableList } from '@/api/common'
let mySwiper = ''

export default {
  name:'InspectPersonalRank',
  data() {
    return {
      sortRules,
      sortValue: 'desc',
      dataList: [],
      labelList: [],
      defaultLabel: '',
      curUser: '',
      countData: {},
      defaultDate: new Date(),
      labelId: '',
    }
  },

  components: {
    PopAction,
    PopDatePicker,
    StaManCard,
    StaComplete,
    StaUncomplete,
  },

  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['userFullOrgIds']),
    taskParams() {
      return {
        account: this.curUser,
        result: 1,
        labelId: this.labelId || '',
        beginTime: this.startTime,
        endTime: this.endTime,
        timeType: 2,
        pageSize: 10,
      }
    },
    curUserItem() {
      return this.dataList.filter((n) => {
        return n.account == this.curUser
      })[0]
    },
  },

  watch: {},

  created() {
    this.getLableList()
  },

  mounted() {},

  activated() {
    let { account, labelId, startTime, endTime } = this.$route.params
    if (account) {
      this.defaultLabel = labelId
      this.labelId = labelId || ''
      this.defaultDate = this.$moment(
        startTime.substr(0, 7),
        'yyyy-MM'
      ).toDate()
      this.startTime = startTime
      this.endTime = endTime
      this.setTime(this.defaultDate)
      this.getExamineTaskPeopleCount(account)
      this.$nextTick(() => {
        this.$refs.popLabel.setSelected(labelId)
      })
    }
  },

  methods: {
    jumpTab(data) {
      this.$router.push({
        name: 'InspectMain',
        params: {
          from: 'PersonalRank',
          tabIndex: data.tabIndex,
          completeness: data.completeness,
          labelId: this.labelId,
          startTime: this.startTime,
          endTime: this.endTime,
          name: this.curUserItem.name,
          account: this.curUserItem.account,
        },
      })
    },
    initSwiper() {
      let initialSlide = 0
      if (this.curUser) {
        for (let i = 0; i < this.dataList.length; i++) {
          if (this.curUser == this.dataList[i].account) {
            initialSlide = i
            break
          }
        }
      }
      mySwiper = new Swiper(this.$refs.mySwiper, {
        direction: 'horizontal',
        loop: false,
        freeMode: true,
        width: 160,
        initialSlide,
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 1,
      })
    },
    getLableList() {
      getLableList({ type: 1 }).then((res) => {
        this.labelList = res.data.map((n) => {
          n.value = n.id
          return n
        })
      })
    },
    getExamineTaskPeopleCount(account) {
      let acct = account || this.curUser
      getExamineTaskPeopleCount({
        orgIds: this.userFullOrgIds,
        labelId: this.labelId || '',
        queryTimeType: 2,
        startTime: this.startTime,
        endTime: this.endTime,
      }).then((res) => {
        let noTask = this.dataList.length == 0
        if (res.data.length > 0) {
          if (
            res.data.filter((n) => {
              return n.account == acct
            }).length > 0
          ) {
            this.curUser = acct
          } else {
            this.curUser = res.data[0].account
          }
          this.getExamineTaskStats()
        }
        this.dataList = this.sortValue == 'desc' ? res.data : res.data.reverse()
        if (this.dataList.length > 0) {
          this.$nextTick(() => {
            this.initSwiper()
            // 任务列表已有数据时需刷新
            !noTask && this.$refs.staUncomplete.getTaskList()
          })
        }
      })
    },
    getExamineTaskStats() {
      getExamineTaskStats({
        account: this.curUser,
        beginTime: this.startTime,
        endTime: this.endTime,
        labelId: this.labelId || '',
      }).then((res) => {
        this.countData = res.data
      })
    },
    onSelectUser(item, i) {
      this.curUser = item.account
      mySwiper.slideTo(i)
      this.$refs.mySwiper.querySelector(
        '.swiper-wrapper'
      ).style.transform = `translate3d(-${
        170 * i - (i > 0 ? 50 : 0)
      }px, 0px, 0px)`
      this.getExamineTaskStats()
      this.$nextTick(() => {
        this.$refs.staUncomplete.getTaskList()
      })
    },
    onSortChange(obj) {
      if (obj.value != this.sortValue) {
        this.dataList.reverse()
        this.curUser = this.dataList[0].account
        this.sortValue = obj.value
        this.$nextTick(() => {
          this.initSwiper()
        })
        this.getExamineTaskStats()
      }
    },
    onDateChange(val) {
      this.setTime(val)
      this.getExamineTaskPeopleCount()
    },
    setTime(date) {
      let dateStr = this.$moment(date).format('yyyy-MM')
      this.startTime = `${dateStr}-01 00:00`
      this.endTime =
        this.$moment(date).endOf('month').format('YYYY-MM-DD') + ' 23:59'
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onPickerChange(key, value) {
      this[key] = value.value
      // 刷新人员列表
      this.getExamineTaskPeopleCount()
    },
  },
}
</script>
<style lang='scss'>
.inspect-manrank {
  padding-top: 91px;
  &__filter {
    position: fixed;
    top: 46px;
    left: 0;
    right: 0;
    padding: 5px 15px 0;
    background: #fff;
    z-index: 10;
  }
  .swiper-container {
    margin-left: 15px;
    padding: 20px 0;
  }
  .inspect-man {
    margin-left: 0;
  }
  .page-body--padding {
    padding-top: 5px;
  }
  .primary-panel {
    padding: 20px 18px 0;
  }
  .van-progress {
    box-shadow: 0px 2px 20px 2px rgba(181, 200, 206, 0.5);
  }
  .van-progress__portion {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .progress {
    position: relative;
    .rate-num {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #333;
      font-size: 20px;
      font-weight: 500;
    }
    .unit {
      font-size: 12px;
    }
  }
  .count-list {
    &__item {
      padding: 18px 10px;
      font-size: 12px;
      color: #666;
      .num {
        font-size: 21px;
        color: #333;
        font-weight: 500;
      }
      .label {
        margin-top: 6px;
        color: #9999;
      }
    }
  }
  .list-head {
    padding: 20px 0;
    font-size: 17px;
    color: #333;
    font-weight: 500;
  }
  .inspectList_cell_top {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
}
</style>